<template>
<!-- 选择组织 -->
<div class="orgStructure-page">
    <Form :model="formOrg" ref="deptForm" :label-width="80" class="orgsearch" style="margin-top:-10px;">
        <Input 
            search 
            :placeholder="$t('module.userManage.placeholder.enterDepartmant')" 
            v-model.trim="formOrg.nameOrCode"
            @on-enter="search"/>
    </Form>    
    <el-tree
        :data="baseData"
        ref="tree"
        :props="treeProps"
        icon-class="ivu-icon-ios-arrow-forward"
        @node-click="selectOrg"
        highlight-current
        node-key="orgId"
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <div>
            <embed
              :src="embedSvg(data.orgType)"
              width="10"
              height="10"
              type="image/svg+xml"
              v-if="embedSvg(data.orgType)"
              class="node-svg"
            />
            <span class="node-label">{{ node.label }}</span>
          </div>
        </span>
    </el-tree>
</div>
</template>

<script>

import locales from "../locales.js";
import userManageAPI from "@/api/userManageApi";
import { CoreModuleName } from "@/const";
 

export default {
    mixins: [locales],
    components: {},
    props: {
        
    },
    data() {
        return {
            currentUserInfo: {},    //当前登录用户信息
            formOrg: {
                nameOrCode: "",
                id: "",
            },
            organization: {},
            baseData: [],
            treeProps: {
                label: "orgName",
                children: "childrenDept"
            },
            // 根据orgType设置相应svg地址("\"是转义字符,需用"\\"代替，否则"\"无法解析为\)
            embedSvg: orgType => {
                let svgUrl;
                switch (+orgType) {
                case 1:
                    svgUrl = "static\\images\\enterprise.svg";
                    break;
                case 2:
                    svgUrl = "static\\images\\company.svg";
                    break;
                case 10:
                    svgUrl = "static\\images\\department.svg";
                    break;
                default:
                    svgUrl = "";
                }
                return svgUrl;
            }
        }
    },
    created() {
        // 当前登录用户
        const RIPPLES = "ripples";
        this.currentUserInfo = $store.state[CoreModuleName].userInfo; 
        this.formOrg.id = this.currentUserInfo.id
        this.getOrgTree()
    },
    methods: {
        selectFirstOrg() {
            if (this.baseData.length > 0 && this.$refs["tree"]) {
                // 当前行加选中效果
                this.$refs["tree"].setCurrentKey(this.baseData[0].orgId);
            }
        },
        selectOrg(data) {
            this.organization = data
        },
        // 根据当前用户id  获取组织树数据
        getOrgTree() {
            userManageAPI.getOrgTree({nameOrCode: this.formOrg.nameOrCode}).then(data => {
                this.formOrg.departmentCode = data[0].orgCode
                this.baseData = data
                this.organization = this.baseData[0]
                this.$nextTick(() => {
                    this.selectFirstOrg()
                })
            })
            
        },
        // 搜索
        search() {
            this.getOrgTree()
        }
    }
}
</script>

<style lang="less" scoped>
    .orgStructure-page {
        .ivu-row {
            .ivu-col {
                min-width: auto;
                .orgsearch {
                    line-height: 48px;
                }
            }
        }
    }
</style>